<template>
	<view :data-theme="theme">
		<useNavBar :title="$t(`page.users.userAddress.navTitle`)">
			<view
				slot="right"
				style="color: #fff"
				class="iconfont icon-more"
				@click="open"
			></view>
		</useNavBar>
		<form @submit="formSubmit" report-submit="true">
			<view class="line">
				<image src="@/static/images/line.png"></image>
			</view>
			<view class="addAddress pad30">
				<view class="list borRadius14">
					<view class="item acea-row row-between-wrapper" style="border: none">
						<view class="name">{{ $t(`page.users.userAddress.name`) }}</view>
						<input
							type="text"
							:placeholder="$t(`page.users.userAddress.name`)"
							placeholder-style="color:#ccc;"
							name="realName"
							:value="userAddress.realName"
							placeholder-class="placeholder"
						/>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="name">{{ $t(`page.users.userAddress.Email`) }}</view>
						<input
							type="text"
							:placeholder="$t(`page.users.userAddress.Email`)"
							placeholder-style="color:#ccc;"
							name="email"
							:value="userAddress.email"
							placeholder-class="placeholder"
						/>
					</view>
					<uni-data-picker
						:popup-title="$t(`page.goodsDetail.choose1`)"
						:localdata="addressList"
						v-model="areaValue"
						@change="onAddressChange"
						:map="addressPickerMap"
					>
						<view class="area-wrap">
							<view class="name">{{
								$t(`page.users.userAddress.district`)
							}}</view>
							<view class="area-name">
								{{ areaName }}
							</view>
						</view>
					</uni-data-picker>

					<!-- <view class="item acea-row row-between-wrapper relative">
						<view class="name">{{ $t(`page.users.userAddress.country`) }}</view>
						<input
							type="text"
							placeholder-style="color:#ccc;"
							name="country"
							:value="country"
							placeholder-class="placeholder"
							@click="selectCountry('country')"
						/>
					</view> -->
					<!-- <view class="item acea-row row-between-wrapper relative">
						<view class="name">{{
							$t(`page.users.userAddress.province`)
						}}</view>
						<input
							type="text"
							:placeholder="$t(`page.users.userAddress.province`)"
							placeholder-style="color:#ccc;"
							name="province"
							placeholder-class="placeholder"
							:value="userAddress.province"
						/>
					</view> -->
					<!-- <view class="item acea-row row-between-wrapper relative">
						<view class="name">{{ $t(`page.users.userAddress.city`) }}</view>
						<input
							type="text"
							:placeholder="$t(`page.users.userAddress.city`)"
							placeholder-style="color:#ccc;"
							name="city"
							placeholder-class="placeholder"
							:value="userAddress.city"
						/>
					</view> -->
					<view class="item acea-row row-between-wrapper relative">
						<view class="name">{{ $t(`page.users.userAddress.address`) }}</view>
						<input
							type="text"
							:placeholder="$t(`page.users.userAddress.address`)"
							placeholder-style="color:#ccc;"
							name="detail"
							placeholder-class="placeholder"
							:value="userAddress.detail"
						/>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="name">{{
							$t(`page.users.userAddress.postCode`)
						}}</view>
						<input
							type="number"
							:placeholder="$t(`page.users.userAddress.postCode`)"
							placeholder-style="color:#ccc;"
							name="postCode"
							:value="userAddress.postCode"
							placeholder-class="placeholder"
						/>
					</view>
					<view class="item acea-row align-center">
						<view @click="selectCountry('code')"
							>{{ countryCode }}
							<text style="color: #d8d8d8; padding: 0 10rpx 0">|</text>
						</view>
						<view class="name">{{ $t(`page.users.userAddress.phone`) }}</view>
						<input
							type="number"
							:placeholder="$t(`page.users.userAddress.phone`)"
							placeholder-style="color:#ccc;"
							name="phone"
							:value="userAddress.phone"
							placeholder-class="placeholder"
							style="flex: 1"
						/>
					</view>
				</view>
				<view class="default acea-row row-middle borRadius14">
					<checkbox-group @change="ChangeIsDefault">
						<checkbox :checked="userAddress.isDefault" color="#00785e" />{{
							$t(`page.users.userAddress.default`)
						}}
					</checkbox-group>
				</view>

				<button class="keepBnt bg_color" form-type="submit">
					{{ $t(`page.users.userAddress.save`) }}
				</button>
			</view>
		</form>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
		<tui-drawer mode="bottom" :visible="showList">
			<SortPickerList
				v-if="showList"
				ref="sortPickerList"
				@clickData="clickData"
				@close="closeList"
			></SortPickerList>
		</tui-drawer>
	</view>
</template>

<script>
import { editAddress, getAddressDetail, getAddressesList } from "@/api/user.js";
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
import { Debounce, isEmail } from "@/utils/validate.js";
import SortPickerList from "@/components/sortPickerList/index.vue";
export default {
	data() {
		return {
			id: 0, //地址id
			userAddress: {
				isDefault: false,
				email: "",
				postCode: "",
			}, //地址详情
			countryCode: "+86",
			country: "",
			cityId: 0,
			city: "",
			province: "",
			theme: "theme3",
			rightDrawer: false,
			showList: false,
			checkType: "country",
			addressList: [],
			addressPickerMap: {
				text: "name",
				value: "name",
			},
			areaValue: [],
		};
	},
	components: {
		SortPickerList,
	},
	computed: {
		...mapState(useAppStore, ["isLogin"]),
		areaName() {
			return this.areaValue.join(" ");
		},
	},
	onLoad(options) {
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.userAddress.navTitle`),
		});
		getAddressesList().then((res) => {
			this.addressList = res.data;
		});
		if (this.isLogin) {
			this.preOrderNo = options.preOrderNo || 0;
			this.id = options.id || 0;
			this.getUserAddress();
			this.getIpInfo();
		} else {
			toLogin();
		}
	},
	methods: {
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		closeList() {
			this.showList = false;
		},
		returns() {
			uni.navigateBack();
		},
		getUserAddress: function () {
			if (!this.id) return false;
			let that = this;
			getAddressDetail(this.id).then((res) => {
				console.log("getAddressDetail", res);
				let data = res.data;
				let areaArr = [];
				if (data.province) {
					areaArr.push(data.province);
				}
				if (data.city) {
					areaArr.push(data.city);
				}
				if (data.district) {
					areaArr.push(data.district);
				}
				that.$set(that, "userAddress", res.data);
				that.$set(that, "areaValue", areaArr);
				that.$set(that, "district", res.data.district);
				that.$set(that, "countryCode", res.data.countryCode);
				that.city_id = res.data.cityId;
			});
		},
		//获取所在地
		getIpInfo() {
			// let that = this;
			// addressIpInfo().then(res=>{
			// 	if(!this.id){
			// 		this.$set(this,'country',res.data.country_name);
			// 		this.$set(this,'countryCode',res.data.country_calling_code);
			// 		if(res.data.region&&res.data.city){
			// 			this.$set(this.userAddress,'detail',res.data.region + ' ' + res.data.city);
			// 		}
			// 	}
			// })
		},
		selectCountry(type) {
			this.showList = true;
			this.checkType = type;
		},
		clickData(data) {
			this.countryCode = "+" + data.value;
			if (this.checkType == "country") {
				this.country = data.country;
			}
			this.showList = false;
		},
		/**
		 * 提交用户添加地址
		 *
		 */
		formSubmit: Debounce(function (e) {
			let that = this,
				value = e.detail.value;
			if (!value.realName)
				return that.$util.Tips({
					title: this.$t(`message.login.name`),
				});
			if (!value.email)
				return that.$util.Tips({
					title: this.$t(`message.login.emailEmpty`),
				});
			if (!isEmail(value.email))
				return that.$util.Tips({
					title: this.$t(`message.login.correctEmail`),
				});
			if (!value.detail)
				return that.$util.Tips({
					title: this.$t(`message.login.detail`),
				});
			if (!value.postCode)
				return that.$util.Tips({
					title: this.$t(`message.login.postCode`),
				});
			if (!value.phone)
				return that.$util.Tips({
					title: this.$t(`message.login.emptyPhone`),
				});
			console.log("value".value);
			if (this.areaValue.length == 0)
				return that.$util.Tips({
					title: this.$t(`message.login.district`),
				});
			value.province = this.areaValue[0] || "";
			value.city = this.areaValue[1] || "";
			value.district = this.areaValue[2] || "";
			value.id = that.id;
			value.countryCode = that.countryCode;
			value.isDefault = that.userAddress.isDefault;
			// value.country = that.country;
			console.log("value", value);
			uni.showLoading({
				title: this.$t(`message.login.save`),
				mask: true,
			});
			editAddress(value)
				.then((res) => {
					uni.hideLoading();
					if (that.id)
						that.$util.Tips({
							title: this.$t(`message.login.updateSU`),
							icon: "success",
						});
					else
						that.$util.Tips({
							title: this.$t(`message.login.saveSU`),
							icon: "success",
						});
					setTimeout(function () {
						if (that.preOrderNo > 0) {
							uni.redirectTo({
								url:
									"/pages/users/order_confirm/index?preOrderNo=" +
									that.preOrderNo +
									"&addressId=" +
									(that.id ? that.id : res.data.id),
							});
						} else {
							uni.navigateBack();
						}
					}, 1000);
				})
				.catch((err) => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err,
					});
				});
		}),
		ChangeIsDefault: function (e) {
			this.$set(this.userAddress, "isDefault", !this.userAddress.isDefault);
		},
		onAddressChange(e) {
			console.log("e", e);
			let addressList = [];
			e.detail.value.forEach((item) => {
				addressList.push(item.text);
			});
			console.log("addressList", addressList);
			this.areaValue = addressList;
			this.userAddress.province = addressList[0] || "";
			this.userAddress.city = addressList[1] || "";
			this.userAddress.district = addressList[2] || "";
			// delete params.areaValue;
		},
	},
};
</script>

<style scoped lang="scss">
.addAddress {
	padding-top: 20rpx;
}

.bg_color {
	@include main_bg_color(theme);
}
.line {
	width: 100%;
	height: 3rpx;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}
.addAddress .list {
	background-color: #fff;
	padding: 0 24rpx;
}

.addAddress .list .item {
	border-top: 1rpx solid #eee;
	height: 90rpx;
	line-height: 90rpx;
	display: flex;
	justify-content: space-between;
}

.addAddress .list .item .name {
	// width: 195rpx;
	font-size: 30rpx;
	color: #333;
}

.addAddress .list .item .address {
	flex: 1;
	margin-left: 50rpx;
}

.addAddress .list .item input {
	flex: 1;
	font-size: 30rpx;
	font-weight: 400;
	text-align: right;
	margin-left: 20rpx;
}

.addAddress .list .item .placeholder {
	color: #ccc;
}

.addAddress .list .item picker .picker {
	width: 410rpx;
	font-size: 30rpx;
}

.addAddress .default {
	padding: 0 30rpx;
	height: 90rpx;
	background-color: #fff;
	margin-top: 23rpx;
}

.addAddress .default checkbox {
	margin-right: 15rpx;
}

.addAddress .keepBnt {
	width: 690rpx;
	height: 86rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 80rpx auto 24rpx auto;
	font-size: 32rpx;
	color: #fff;
}

.addAddress .wechatAddress {
	width: 690rpx;
	height: 86rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 0 auto;
	font-size: 32rpx;
	// color: #E93323 ;
	@include main_color(theme);
	@include coupons_border_color(theme);
}

.font_color {
	@include main_color(theme);
}

.relative {
	position: relative;
}

.icon-dizhi {
	font-size: 44rpx;
	z-index: 100;
}

.abs_right {
	position: absolute;
	right: 0;
}

::v-deep checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	@include main_bg_color(theme);
	@include coupons_border_color(theme);
	color: #fff !important;
}

::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	@include main_bg_color(theme);
	@include coupons_border_color(theme);
	color: #fff !important;
	margin-right: 0 !important;
}
.area-wrap {
	display: flex;
	border-top: 1rpx solid #eee;
	padding: 30rpx 0;
	font-size: 30rpx;
	.name {
		text-align: left;
	}
	.area-name {
		flex: 1;
		margin-left: 50rpx;
		text-align: right;
	}
}
</style>
